<template>
  <div>
    <TableHead />
    <a-table
      v-model:selected-keys="reviewKeys"
      table-layout-fixed
      :data="reviewData.data"
      :loading="reviewData.loading"
      :columns="translateColumns(columns)"
      :bordered="false"
      row-key="resId"
      :row-selection="{
        selectedRowKeys: reviewKeys,
        showCheckedAll: true
      }"
      sticky-header
      class="table-container"
      page-position="tr"
      :pagination="{
        pageSize: reviewQuery.pageSize,
        total: reviewQuery.total,
        current: reviewQuery.pageNum,
        showJumper: true,
        showTotal: true
      }"
      @page-change="pageChange"
    >
      <template #optional="{ record }">
        <a-dropdown-button size="mini" @click.stop="allow(record.resId)">
          {{ t["通过"] }}
          <template #content>
            <a-menu style="width: 120px">
              <a-menu-item @click="delLibrary(record.resId)"> {{ t["删除"] }} </a-menu-item>
              <a-menu-item @click="reject(record.resId)"> {{ t["驳回"] }} </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown-button>
      </template>
      <template #uri="{ record }">
        <img v-if="record.type === '0'" :src="record.uri" height="80" />
        <video
          v-else-if="record.type === '1'"
          controls
          :src="record.uri"
          height="80"
          controlslist="nodownload"
        ></video>
      </template>
      <template #status="{ record }">
        <a-badge :color="getStatus(record.status).color"></a-badge>
        {{ t[getStatus(record.status).title] }}
      </template>
    </a-table>
    <Reject></Reject>
  </div>
</template>

<script setup lang="ts">
import columns from "../data/columns";
import { allow, delLibrary, getLibraryList } from "../data/curd";
import TableHead from "./table-head/TableHead.vue";

import { reviewData, reviewKeys, reviewQuery } from "../data/data";
import { reviewStatusList } from "../data/options";
import { reasonForm, showRejectModal } from "./reject-form/data";
import Reject from "./reject-form/Reject.vue";

const t = translate("公共模块");
onMounted(() => {
  getLibraryList();
});

const pageChange = (page: number) => {
  reviewQuery.value.pageNum = page;
  getLibraryList();
};
const reject = (id: string) => {
  reasonForm.value.resId = id;
  showRejectModal.value = true;
};
const getStatus = (status: string) => {
  return reviewStatusList[Number(status)];
};
</script>

<style lang="scss" scoped>
.table-container {
  height: 100%;
  padding: 12px;
  ::v-deep(.arco-card-header) {
    border: none;
  }
}
</style>
